<script setup lang='ts'>
import { useGetAgreementMetaInfo } from '@fl/api/purchase'
import { useJcOrderMetaGetOne } from '@fl/api/supplier'
import { cloneDeep } from 'lodash-es'
import { useRoute } from 'vue-router'

import DirectOrder from '../protocol-management/component/direct-order.vue'

const { params } = useRoute()
const orderId = computed(() => {
    return params.id
})
const agreementId = computed(() => {
    return orderData.value?.agreementId
})
const list = ref([])
const showProductSelect = ref(false)
const { data: orderData, isLoading: orderLoading } = useJcOrderMetaGetOne(orderId)
const { data: agreementData, isLoading: agreementLoading } = useGetAgreementMetaInfo(agreementId)
const isLoading = computed(() => orderLoading.value || agreementLoading.value)
watchEffect(() => {
    if (orderData.value) {
        console.log(orderData.value)
        list.value = cloneDeep(orderData.value?.orderProductsVOS ?? [])
    }
})
</script>

<template>
    <ElSkeleton v-if="isLoading"
                :rows="5"
    />

    <DirectOrder v-else
                 v-model:showProductSelect="showProductSelect"
                 v-model:list="list"
                 v-model:orderId="orderId"
                 :agreement-meta-info="agreementData"
                 :order-data="orderData"
    />
</template>
